import React, { useRef, useEffect } from 'react';
import { Card, Row, Col, Progress } from 'antd';
import cn from 'classnames';

import ReactEcharts from '@/components/Echarts';
import { fixNumber } from '../util';

import styles from '../index.less';

const renderBar = (barData = []) => {
    const valuesData = barData.map((item, index) => ({
        value: item.num,
        itemStyle: {
            color: index !== barData.length - 1 ? '#40A9FF' : '#666'
        }
    }));

    const xData = barData.map(item => item.rankName);

    return (
        <ReactEcharts
            option={{
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        axisLabel: { interval: 0 },
                        type: 'category',
                        splitLine: { show: false },
                        data: xData
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '',
                        type: 'bar',
                        barWidth: '60%',
                        data: valuesData
                    }
                ]
            }}
            style={{
                width: '100%',
                height: '100%'
            }}
        />
    );
};

const setStyle = (dom, style) => {
    if (!dom) return;
    Object.keys(style).forEach(key => {
        dom.style[key] = style[key];
    });
};

const colorMap = {
    优: styles.colorGood,
    中: styles.colorMedium,
    差: styles.colorPoor,
    未评估: styles.colorNone
};

const adjustProgressText = container => {
    if (!container) return;
    const bars = container.querySelectorAll('.ant-progress');
    bars.forEach(bar => {
        const outer = bar.querySelector('.ant-progress-outer');
        const text = bar.querySelector('.ant-progress-text');
        const bg = bar.querySelector('.ant-progress-bg');
        setStyle(outer, {
            position: 'relative'
        });
        setStyle(text, {
            position: 'absolute',
            left: bg.style.width,
            top: '50%',
            transform: 'translate(-5px,-50%)',
            color: 'rgba(0, 0, 0, 0.45)'
        });
    });
};

export default ({ data = {} }) => {
    const ref = useRef();
    const getPercentage = num => (num / data.shouldDoneWorkloadNum) * 100;
    useEffect(() => {
        adjustProgressText(ref.current);
    }, [data]);
    return (
        <Card
            title={data.productName}
            className={cn(styles.cardNoBorder, styles.cardNoPadding)}
            bordered={false}
            extra={
                <a className={styles.moreBtn} href="#">
                    更多
                </a>
            }
        >
            <div className={styles.subTitle}>产品版本</div>
            <Row className={styles.versionBox} gutter={10}>
                <Col span={8}>
                    <div className={styles.boxItem}>
                        <em>{data.developVersionNum}</em>
                        <p>研发中版本</p>
                    </div>
                </Col>
                <Col span={8}>
                    <div className={styles.boxItem}>
                        <em>{data.testVersionNum}</em>
                        <p>测试中版本</p>
                    </div>
                </Col>
                <Col span={8}>
                    <div className={styles.boxItem}>
                        <em>{data.onlineVersionNum}</em>
                        <p>已上线版本</p>
                    </div>
                </Col>
            </Row>
            <Row type="flex" justify="space-between" style={{ marginTop: 24 }}>
                <Col>
                    <div className={styles.infoBox}>
                        <p>参与人员</p>
                        <p>
                            <em>{fixNumber(data.peopleNum, 0)}</em>人
                        </p>
                    </div>
                </Col>
                <Col>
                    <div className={styles.infoBox}>
                        <p>计划工作量</p>
                        <p>
                            <em>{fixNumber(data.planWorkloadNum, 0)}</em>人天
                        </p>
                    </div>
                </Col>
                <Col>
                    <div className={styles.infoBox}>
                        <p>额定工作量</p>
                        <p>
                            <em>{fixNumber(data.shouldDoneWorkloadNum, 0)}</em>人天
                        </p>
                    </div>
                </Col>
                <Col>
                    <div className={styles.infoBox}>
                        <p>已完成工作量</p>
                        <p>
                            <em>{fixNumber(data.actualDoneWorkloadNum, 0)}</em>人天
                        </p>
                    </div>
                </Col>
            </Row>
            <Row style={{ marginTop: 32, width: '90%' }} className="progress-box">
                <div className={styles.subTitle}>关键事件节点：{data.keyPointTaskNum}</div>
                <div className={styles.progressPanel} ref={ref}>
                    <div className={styles.panelItem}>
                        <span className={styles.itemTitle}>正常达成</span>
                        <Progress
                            strokeColor="#FFA22D"
                            percent={getPercentage(data.normalDoneTaskNum)}
                            format={() => data.normalDoneTaskNum}
                        />
                    </div>
                    <div className={styles.panelItem}>
                        <span className={styles.itemTitle}>逾期达成</span>
                        <Progress
                            strokeColor="#FFA22D"
                            percent={getPercentage(data.overdueDoneTaskNum)}
                            format={() => data.overdueDoneTaskNum}
                        />
                    </div>
                    <div className={styles.panelItem}>
                        <span className={styles.itemTitle}>逾期预警</span>
                        <Progress
                            strokeColor="#FFA22D"
                            percent={getPercentage(data.overdueWarnTaskNum)}
                            format={() => data.overdueWarnTaskNum}
                        />
                    </div>
                    <div className={styles.panelItem}>
                        <span className={styles.itemTitle}>正常进行</span>
                        <Progress
                            strokeColor="#FFA22D"
                            percent={getPercentage(data.normalDoingTaskNum)}
                            format={() => data.normalDoingTaskNum}
                        />
                    </div>
                    <div className={styles.panelItem}>
                        <span className={styles.itemTitle}>已逾期</span>
                        <Progress
                            strokeColor="#FA541C"
                            percent={getPercentage(data.overdueTaskNum)}
                            format={() => data.overdueTaskNum}
                        />
                    </div>
                </div>
            </Row>
            <Row style={{ marginTop: 32 }}>
                <div className={styles.subTitle}>产品质量</div>
                <Col span={12}>
                    <Row style={{ height: 170 }}>
                        <Row gutter={24}>
                            <Col span={12}>
                                <div className={styles.infoBox}>
                                    <p>人均Bug量</p>
                                    <p>
                                        <em>{data.perCapitaBugNum}</em>人
                                    </p>
                                </div>
                            </Col>
                            <Col span={12}>
                                <div className={styles.infoBox}>
                                    <p>平均版本质量</p>
                                    <p>
                                        <em>{fixNumber(data.score)}</em>分
                                    </p>
                                </div>
                            </Col>
                        </Row>
                        <Row gutter={24} style={{ marginTop: 24 }}>
                            <Col span={12}>
                                <div className={styles.infoBox}>
                                    <p>目标值</p>
                                    <p>
                                        <em>{data.perCapitaDestBugNum}</em>天
                                    </p>
                                </div>
                            </Col>
                            <Col span={12}>
                                <div className={styles.infoBox}>
                                    <p>评估结果</p>
                                    <p>
                                        <em className={colorMap[data.rankName]}>{data.rankName}</em>
                                    </p>
                                </div>
                            </Col>
                        </Row>
                    </Row>
                </Col>
                <Col span={12} style={{ height: 170 }}>
                    {renderBar(data.productQualityRankVOList || [])}
                </Col>
            </Row>
        </Card>
    );
};
